<template>
    <h2>setup页面</h2>
    <h3>{{ x }}</h3>
    <button @click="fn">点击</button>

</template>
<!-- 
<script setup lang='ts'>

</script> -->

<!-- 1. setup:vue3的语法 -->
<!-- <script lang="ts">
export default{
    setup(){
        let x:number=10;
        function fn(){
            console.log(666);
        }
        console.log("setup.......")
        console.log(this);

        // 返回值的内容模版内可以直接访问到
        return{
            x,
            fn
        }
    },
    beforeCreate(){
        console.log("创建前");

    }
}
</script> -->

<!-- 2.setup:vue3.2的语法糖 -->
<script setup lang="ts">
let x:number=100;
function fn(){
    console.log(888);
}

console.log(this); //undefined
// 因为setup是在创建之前就会被执行的代码，这个时候还没有进行实例化，
// 所以this不能指向实例化对象，因此在setup中不要使用this
</script>

<style scoped>

</style>
